<!--登录页-->
<template>
  <div class="header">
    <el-container style="padding:50px">
      <el-header>
        <el-row :gutter="10">
         <el-col :span="3"><img src="/imgs/login/logo.png" style="height: 50px" alt=""></el-col>
         <el-col :span="1"><img src="/imgs/login/auto.png" style="height: 50px" alt=""></el-col>
         <el-col :span="1"><img src="/imgs/login/verticalLine.png" style="height: 50px" alt=""></el-col>
         <el-col :span="19">
           <span class="header-span">智慧车辆运营管理系统</span>
         </el-col>
        </el-row>
      </el-header>

      <el-main>
        <!--主体部分-->
        <el-row :gutter="40">
          <!--左侧图片-->
          <el-col :span="16">
            <img src="/imgs/login/bg.png" style="width: 100%" alt="">
          </el-col>
          <!--右侧登录表单-->
          <el-col :span="8" style="margin-top: 150px">

            <el-card>
              <h3 style="text-align: center">用户登录</h3>
              <el-form label-position="top">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" v-model="user.password"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button @click="login" type="primary" style="width: 100%">登录</el-button>
                </el-form-item>

              </el-form>
              <div class="card-text">
                （体验账号：Tom 密码：123456）
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>


<script setup>
import {ref} from "vue";
import axios from "axios"
import {ElMessage} from "element-plus";
import router from "@/router";

const user = ref({username:'',password:''});
const login = ()=>{
  console.log(user.value);
  //给后端发送登录请求，需要借助axios工具
  axios.post('http://localhost:8080/v1/user/login',user.value)
       .then((response)=>{//回调函数，服务器响应后执行此处代码
         console.log(response);//response是响应对象，我们可以通过response.data获取服务器的响应数据
         if(response.data.code == 2000){//根据JsonResult中的code值判断结果，如果是2000登录成功
           ElMessage.success('登录成功');
           //console.log(response.data);//后端返回的JsonResult
           //console.log(response.data.data);//JsonResult中的data,也就是uservo
           //console.log(JSON.stringify(response.data.data));//将JS对象转为JSON格式的字符串
           /*localStarage只能存储字符串类型的键值对*/
           localStorage.setItem('user',JSON.stringify(response.data.data));
           router.push('/');//登录成功后跳转到用户界面
         }else {
           ElMessage.error('登录失败');
           user.value = { username:'',password:''}//登录失败清空表单
         }
       });
}
</script>


<style scoped>
.header{
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(135deg, #1352F2,#3C82F5);
}
.header-span{
  color: white;
  font-weight: bold;
  font-size: 30px
}
.card-text{
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 10px 0;
}
</style>